
<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Hear Me</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="assets/i/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
  <!--
  <link rel="canonical" href="http://www.example.com/">
  -->

  <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">
  <link rel="stylesheet" href="Public/Home/css/app.css">
  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  <!--<![endif]-->
  <style type="text/css">
    .player{margin: 20px 0 0 0;}
    .txth{margin-bottom:0;text-align: center;}
    .spdsz{margin-top: 20px;}
  </style>
  
  <script type="text/javascript">

  </script>



</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a
  href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

<div class="am-g am-form-group">
  <label class="am-alert am-u-sm-12 txth" for="doc-ta-1">输入文字</label>
  <textarea class="ttxt am-u-sm-12" rows="5" id="doc-ta-1" placeholder="填写内容"></textarea>
</div>

<div class="am-g">
  <button type="button" class="am-btn am-btn-primary am-u-sm-5" onclick="ChongXie()">重写</button>
  <div class="am-u-sm-1"></div>
  <button type="button" class="am-btn am-btn-primary am-u-sm-5" onclick="Hecheng()">播放</button>
</div>


<div class="am-g player">
  <audio src=""  class="mps am-u-sm-centered" autoplay="autoplay">
  您的浏览器不支持 audio 标签!
  </audio>
</div>


<!-- 设置选项 -->
<div class="am-panel-group am-u-sm-12" id="accordion">
  <div class="am-panel am-panel-default">
    <div class="am-panel-hd">
      <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-2'}">
        高级选项设置
      </h4>
    </div>
    <div id="do-not-say-2" class="am-panel-collapse am-collapse am-u-sm-12">
      <div class="am-panel-bd am-u-sm-12">
        <!-- 性别选择 -->
        <div class="am-u-sm-12">
          <div class="am-u-sm-8 am-u-sm-centered">
            <div class="am-btn-group doc-js-btn-1 sex" data-am-button>
              <label class="am-btn am-btn-primary"  onclick="Sex(0)">
                <input type="radio" name="options" value="0" id="option2"> 女声
              </label>
              <label class="am-btn am-btn-primary" onclick="Sex(1)">
                <input type="radio" name="options" value="1" id="option1"> 男声
              </label>
            </div>
          </div>
        </div>
        
        
        <script>
          
          //var per = localStorage.per ;
          function Sex (sexid) {
            localStorage.per = sexid;
            per = localStorage.per;
          }

          $(document).ready(function(){
            per = localStorage.per;
            if (per == 0) {
              $('.sex label:first').addClass('am-active');
            } else if(per == 1){
              $('.sex label:last').addClass('am-active');
            }else{
              per = 1; //性别选择，默认为：1，男声 ps:因为是给我大姑父做的
              $('.sex label:last').addClass('am-active');
            };
          })

          // 获取选中的值
          // $(window).load(function(){
          //     var $radios = $('[name="options"]');
          //     $radios.on('change',function() {
          //     per = $radios.filter(':checked').val();
          //     alert(per);
          //   });
          // });
        </script>
        <div class="am-u-sm-12">
          <div class="am-u-sm-8 am-u-sm-centered">
            <div class="am-btn-group spdsz">
              <button type="button" class="am-btn am-btn-primary am-round jian" onclick="Jian()">&lt;</button>
              <button type="button" class="am-btn am-btn-primary am-round am-disabled spdval" disabled>5X</button>
              <button type="button" class="am-btn am-btn-primary am-round jia" onclick="Jia()">&gt;</button>
            </div>
          </div>
          
        </div>
          
        <script type="text/javascript">
          //语速操作，默认为：5
          //var spd = localStorage.spd;
          function Jian () {
            spd--;
            $('.spdval').text(spd+'X');
            if (spd == 0) {
              $('.jian').addClass('am-disabled')
            } else{
              $('.jia').removeClass('am-disabled')
            };
            localStorage.spd = spd;
          }
          function Jia () {
            spd++;
            $('.spdval').text(spd+'X');
            if (spd == 9) {
              $('.jia').addClass('am-disabled')
            } else{
              $('.jian').removeClass('am-disabled')
            };
            localStorage.spd = spd;
          }

          $(document).ready(function(){
            localStorage.spd ? spd = localStorage.spd : localStorage.spd = 5;
            spd = localStorage.spd;
            $('.spdval').text(spd+'X');
            if (spd <= 0) {
              $('.jian').addClass('am-disabled');
              $('.jia').removeClass('am-disabled');
            } else if(spd >= 9){
              $('.jia').addClass('am-disabled');
              $('.jian').removeClass('am-disabled');
            }else{
              localStorage.spd = 5;
              $('.jia').removeClass('am-disabled');
              $('.jian').removeClass('am-disabled')
            };
          })

        </script>

      </div>
    </div>
  </div>
</div>

<script>
    
    
    //必选参数
    var lan = 'zh'; //语言选择,填写zh
    var tok = '这里是百度生成的，需要去百度语言合成平台申请，并获取相应值';
    var ctp = 1; //客户端类型选择，web端填写1
    var cuid = '70zhenDGF'; //用户唯一标识，用来区分用户，填写机器 MAC 地址或 IMEI 码，长度为60以内
    //可选参数
    var spd = localStorage.spd; //语速，取值0-9，默认为5中语速
    var pit = 5; //音调，取值0-9，默认为5中语调
    var vol = 9; //音量，取值0-9，默认为5中音量
    var per = localStorage.per; //发音人选择，取值0-1, 0为女声，1为男声，默认为女声

    //网页重构
    $(document).ready(function(){
      //window.sessionStorage.clear();  //清除HTML5 保存数据
    })


    //重填文字
    function ChongXie(){
      $('.ttxt').val('');
    }


    //语音合成方法
    function Hecheng() {
        var tex = $('.ttxt').val();  //合成的文本，使用UTF-8编码，请注意文本长度必须小于1024字节
        (tex == '') ? tex = '请输入文字' : tex = tex ;
        var hmurl = 'http://tsn.baidu.com/text2audio?tex='+tex+'&lan='+lan+'&tok='+tok+'&ctp='+ctp+'&cuid='+cuid+'&spd='+spd+'&pit='+pit+'&vol='+vol+'&per='+per;
        //重写播放器
        $('.mps').attr('src',hmurl);
          //alert(mpper);
         
    };


</script>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->


<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>

</body>
</html>
